<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" >
            <div v-show="modalType === 'edit' || modalType === 'add'" class="form-style">
                <Form ref="formItem" label-position="right" :rules="ruleValidate" :model="formItem" :label-width="130">
                    <FormItem label="职权编码：" prop="code">
                        <Input type="text" v-model="formItem.code" placeholder="请输入职权编码" maxlength="255"
                               clearable></Input>
                    </FormItem>
                    <FormItem label="职权名称：" prop="project_name">
                        <Input type="text" v-model="formItem.project_name" placeholder="请输入职权名称" maxlength="255"
                               clearable></Input>
                    </FormItem>
                    <FormItem label="职权子项目编码：" prop="sub_code">
                        <Input type="text" v-model="formItem.sub_code" placeholder="请输入子项目编码" maxlength="255"
                               clearable></Input>
                    </FormItem>
                    <FormItem label="职权子项目名称：" prop="subitem">
                        <Input v-model="formItem.subitem" placeholder="请输入子项目名称" clearable></Input>
                    </FormItem>
                    <FormItem label="职权类型：" prop="type">
                        <Select clearable v-model="formItem.type" style="width:200px" placeholder="请选择职权类型">
                            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="决定机构：" prop="action_subject">
                        <Input type="text" v-model="formItem.action_subject" placeholder="请输入决定机构" maxlength="255"
                               clearable></Input>
                    </FormItem>
                    <FormItem label="职权依据：" prop="powers_basis">
                        <Input type="textarea" :autosize="{minRows: 2, maxRows: 40}" v-model="formItem.powers_basis"
                               placeholder="请输入职权依据" clearable></Input>
                    </FormItem>
                    <FormItem label="事项责任：" prop="duty_matter">
                        <Input type="textarea" :autosize="{minRows: 2, maxRows: 40}" v-model="formItem.duty_matter"
                               placeholder="事项责任" clearable></Input>
                    </FormItem>
                    <FormItem label="备注：" prop="remarks">
                        <Input type="textarea" :autosize="{minRows: 2, maxRows: 15}"
                               v-model="formItem.remarks" placeholder="请输入备注" clearable></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'edit' || modalType === 'add'">
                    <Button type="text" @click="modalShow = false">取消</Button>
                    <Button type="success" @click="saveBtn" :loading="btnLoading">保存</Button>
                </template>
            </div>
            <div v-show="modalType === 'info'" class="info-style">
                <Form label-position="right" :model="formItem" >
                    <Row :gutter="16">
                        <Col span="12">
                            <FormItem label="职权编码：">
                                {{formItem.code}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="职权名称：">
                                {{formItem.project_name}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="职权子项目编码：">
                                {{formItem.sub_code}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="职权子项目名称：">
                                {{formItem.subitem}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="职权类型：">
                                {{type}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="决定机构：">
                                {{formItem.action_subject}}
                            </FormItem>
                        </Col>
                        <Col span="24">
                            <FormItem label="职权依据：">
                                {{formItem.powers_basis}}
                            </FormItem>
                        </Col>
                        <Col span="24">
                            <FormItem label="事项责任：">
                                {{formItem.duty_matter}}
                            </FormItem>
                        </Col>
                        <Col span="24">
                            <FormItem label="备注：">
                                {{formItem.remarks}}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'info'">
                    <Button type="text" @click="modalShow = false">关闭</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  insertGovPowersData,
  updateGovPowersData
} from '@/api/setting/powers-manage'

export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'add'
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    const validateSubName = (rule, value, callback) => {
      if (!this.formItem.subitem && this.formItem.sub_code) {
        callback(new Error('子项目名称不能为空'))
      } else {
        callback()
      }
    }
    const validateCode = (rule, value, callback) => {
      if (this.formItem.sub_code && !this.formItem.code) {
        callback(new Error('职权编码不能为空'))
      } else {
        callback()
      }
    }
    return {
      ruleValidate: {
        code: [
          { validator: validateCode, trigger: 'blur' }
        ],
        project_name: [
          { required: true, message: '职权名称不能为空', trigger: 'blur' }
        ],
        duty_matter: [
          { required: true, message: '事项责任不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '职权类型不能为空', trigger: 'change' }
        ],
        action_subject: [
          { required: true, message: '决定机构不能为空', trigger: 'blur' }
        ],
        powers_basis: [
          { required: true, message: '职权依据不能为空', trigger: 'blur' }
        ],
        // sub_code: [
        //   { validator: validateSubCode, trigger: 'blur' }
        // ],
        subitem: [
          { validator: validateSubName, trigger: 'blur' }
        ]
      },
      formItem: {
        action_subject: this.company_name
      },
      typeList: [
        {
          value: '1',
          label: '行政征收'
        },
        {
          value: '2',
          label: '行政裁决'
        },
        {
          value: '3',
          label: '行政给付'
        },
        {
          value: '4',
          label: '行政奖励'
        },
        {
          value: '5',
          label: '行政确认'
        },
        {
          value: '6',
          label: '行政许可'
        },
        {
          value: '7',
          label: '行政强制'
        },
        {
          value: '8',
          label: '行政检查'
        },
        {
          value: '9',
          label: '行政处罚'
        },
        {
          value: '10',
          label: '其他权力'
        }
      ],
      btnLoading: false,
      modalShow: false
    }
  },
  computed: {
    type () {
      switch (this.formItem.type) {
        case '1':
          return '行政征收'
        case '2':
          return '行政裁决'
        case '3':
          return '行政给付'
        case '4':
          return '行政奖励'
        case '5':
          return '行政确认'
        case '6':
          return '行政许可'
        case '7':
          return '行政强制'
        case '8':
          return '行政检查'
        case '9':
          return '行政处罚'
        case '10':
          return '其他权力'
        default:
          return ''
      }
    }
  },
  methods: {
    modalAction () {
      this.modalShow = !this.modalShow
    },
    saveBtn () {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          this.saveOption()
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    },
    handleReset () {
      this.$refs['formItem'].resetFields()
    },
    saveOption () {
      this.typeList.forEach(item => {
        if (item.value === this.formItem.type) this.formItem.powers_type = item.label
      })
      // this.formItem.sub_code = !this.formItem.sub_code && !this.formItem.subitem ? '1' : this.formItem.sub_code
      let param = {
        id: this.formItem.id,
        code: this.formItem.code === '' ? null : this.formItem.code,
        sub_code: this.formItem.sub_code === '' ? null : this.formItem.sub_code,
        type: this.formItem.type,
        powers_type: this.formItem.powers_type,
        action_subject: this.formItem.action_subject,
        project_name: this.formItem.project_name,
        subitem: this.formItem.subitem,
        powers_basis: this.formItem.powers_basis,
        duty_matter: this.formItem.duty_matter,
        remarks: this.formItem.remarks
      }
      this.btnLoading = true
      if (this.modalType === 'add') {
        insertGovPowersData(param).then(ret => {
          const data = ret.data
          if (data.errcode === 0) {
            this.btnLoading = false
            this.$emit('saveOption')
            this.success()
            this.modalShow = false
          } else {
            this.error(data)
            this.btnLoading = false
          }
        })
      } else if (this.modalType === 'edit') {
        updateGovPowersData(param).then(ret => {
          const data = ret.data
          if (data.errcode === 0) {
            this.btnLoading = false
            this.$emit('saveOption')
            this.success()
            this.modalShow = false
          } else {
            this.error(data)
            this.btnLoading = false
          }
        })
      } else {
      }
    },
    cancelOption () {
      this.$emit('cancel')
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
  },
  watch: {
    dataObj (val) {
      this.formItem = val
    }
  }
}
</script>

<style scoped>
    .form-style{
        margin: 0px 60px;
    }
    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    /deep/.ivu-modal-header-inner{
        font-weight: 700;
        margin: 5px 20px;
        font-size: 18px;
    }
    .info-style{
        margin: 10px 40px;
    }
    .info-style /deep/.ivu-form .ivu-form-item-label{
        font-weight: 700;
        font-size: 16px;
    }
</style>
